<!--
    * Time    : 2021-03-29 14:10:41
    * Author  : zhangTj
    * Desc    : description
-->

<template>
    <div class="w750 font-14 bg-fff">
        <!-- 审核提示 -->
        <div
            v-if="pointInfo && (pointInfo.auditStatus == 'ACTIVATION_APPLY' || pointInfo.auditStatus == 'REJECT_APPLY')"
            class="w-100 flex-center flex-column bg-main text-fff"
            style="height: 128px"
        >
            <span
                class="iconfont"
                :class="[pointInfo.auditStatus == 'ACTIVATION_APPLY' ? 'iconselect' : 'iconshibai']"
                style="font-size: 30px"
            ></span>
            <span class="mt-1">{{ pointInfo.auditStatus == 'ACTIVATION_APPLY' ? '已提交激活，等待商家确认' : '商家已拒绝激活，可重新申请' }}</span>
        </div>

        <div v-if="pointInfo && pointInfo.auditStatus != 'ACTIVATION_APPLY' && pointInfo.auditStatus != 'REJECT_APPLY'" class="border-bottom-10bg">
            <van-cell title="自提点信息" is-link :to="{ name: 'pointActive', query: { id: pointInfo.id } }" />
        </div>
        <div class="p-1 bg-fff">
            <div class="flex-between">
                <span class="font-14">我的自提点</span>
                <template v-if="pointInfo && pointInfo.disSinceMentionStatusSupEdit">
                    <van-switch :value="openPoint" @change="changePointStatus" :active-color="themes.color" size="24px" />
                </template>
                <template v-if="pointInfo && !pointInfo.disSinceMentionStatusSupEdit">
                    <template v-if="pointInfo.auditStatus == 'REJECT_APPLY'">
                        <van-switch :value="openPoint" @change="changePointStatus" :active-color="themes.color" size="24px" />
                    </template>
                    <template v-else>
                        <div v-if="pointInfo.auditStatus == 'ACTIVATION_APPLY'" class="font-14 text-999">待激活</div>
                        <div v-else class="font-14 text-999">{{ pointInfo.status == 'ON' ? '已启用' : '已关闭' }}</div>
                    </template>
                </template>
                <van-switch v-if="!pointInfo" :value="openPoint" @change="changePointStatus" :active-color="themes.color" size="24px" />
            </div>
            <p v-if="pointInfo && pointInfo.auditStatus == 'CLOSE_APPLY'" class="mt-15p font-12 text-999">关闭申请中，等待商家确认</p>
            <p v-else-if="pointInfo && pointInfo.auditStatus == 'ACTIVATION_APPLY'" class="mt-15p font-12 text-999">已提交激活，等待商家确认</p>
            <p v-else-if="pointInfo && pointInfo.auditStatus == 'REJECT_CLOSE'" class="mt-15p font-12 text-999">商家已拒绝关闭自提点，请重新申请</p>
            <p v-else-if="pointInfo && pointInfo.auditStatus == 'PASS' && pointInfo.status == 'ON'" class="mt-15p font-12 text-999">
                您的自提点已开启
            </p>
            <p v-else-if="pointInfo && pointInfo.auditStatus == 'PASS' && pointInfo.status == 'OFF'" class="mt-15p font-12 text-999">
                您的自提点已关闭
            </p>
            <p v-else class="mt-15p font-12 text-999">您已获得开启个人自提点的权限，开启后可代理线下门店自提业务</p>
            <div class="text-999 font-12 mt-3">
                <template v-if="!openPoint && !pointInfo">
                    <div class="bg-f8 px-15p py-2 rounded-8">
                        <p class="font-14 font-weight">一、如何获取权限？</p>
                        <p class="mt-1">（1）成为商城分享员</p>
                        <p>（2）达成一定的分享等级</p>
                    </div>
                    <div class="bg-f8 px-15p py-2 rounded-8 mt-1">
                        <p class="font-14 font-weight">二、如何激活我的自提点？</p>
                        <p class="mt-1">（1）开启开关</p>
                        <p>（2）填入自提点信息</p>
                        <p>（3）提交自提点信息</p>
                        <p>（4）商家确认通过</p>
                    </div>
                    <div class="bg-f8 px-15p py-2 rounded-8 mt-1">
                        <p class="font-14 font-weight">三、自提业务流程是怎样的？</p>
                        <p class="mt-1">（1）用户选购商品选择线下自提并付款</p>
                        <p>（2）用户上门提货，出示核销码</p>
                        <p>（3）扫核销码或者输入核销码进行核销</p>
                        <p>（4）核销完成</p>
                    </div>
                    <div class="bg-f8 px-15p py-2 rounded-8 mt-1">
                        <p class="font-14 font-weight">四、关于售后</p>
                        <p class="mt-1">（1）核销截止时间前，订单取消、完成退款、产生退货退款时，则分享员不需要核销此订单，订单不显示。</p>
                        <p>
                            （2）核销截止时间前，订单产生售后问题如退款、退款退货时取消售后，则正常核销；到截止时间，售后还在进行，则不需要核销，订单不再显示。
                        </p>
                    </div>
                </template>
                <template v-else>
                    <template v-if="pointInfo && pointInfo.disSinceMentionStatusSupEdit == true">
                        <div class="px-15p py-2 rounded-8" style="background: #fff7ed; color: #d68652">
                            <div class="font-14 font-weight">自提点状态说明：</div>
                            <div class="mt-1">
                                （1）开启状态：表示您的自提点为正常状态，用户下单系统将匹配到您的自提点，用户也可以选择您的自提点进行下单提货
                            </div>
                            <div>（2）关闭状态：表示您的自提点处于关闭状态，用户下单系统不会匹配您的自提点，用户下单也不能选择到您的自提点</div>
                            <div>（3）特殊状态：如商家端将您的自提点禁用，您将不能进入您的自提点正常营业</div>
                            <div>
                                （4）权限：当达到商家规定等级时，您可获得个人自提点权益，您激活自提点且商家确认后，可自主控制自提点是否正常开启。
                            </div>
                        </div>
                    </template>
                    <template v-if="pointInfo && pointInfo.disSinceMentionStatusSupEdit == false">
                        <div class="px-15p py-2 rounded-8" style="background: #fff7ed; color: #d68652">
                            <div class="font-14 font-weight">自提点状态说明：</div>
                            <div class="mt-1">
                                （1）启用状态：表示您的自提点为正常状态，用户下单系统将匹配到您的自提点，用户也可以选择您的自提点进行下单提货
                            </div>
                            <div>（2）特殊状态：如商家端将您的自提点禁用，您将不能进入您的自提点正常营业</div>
                            <div>
                                （3）权限：当达到商家规定等级时，您可获得个人自提点权益，您激活自提点且商家确认后，可正常运营自提点；如您需关闭自提点，请及时联系商家将您的自提点禁用，以免产生不必要损失
                            </div>
                        </div>
                    </template>
                </template>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import { disSMPoint, disSMPointUpdateStatus } from '@/api/distributorPoints'

export default {
    name: 'pointIndex',
    components: {},
    data() {
        return {
            openPoint: false, // 开关
            pointInfo: null // 自提点信息
        }
    },
    computed: {
        ...mapState(['themes'])
    },
    watch: {},
    created() {},
    destroyed() {},
    mounted() {
        this.getInfo()
    },
    methods: {
        // 获取自提点信息
        getInfo() {
            disSMPoint()
                .then((res) => {
                    if (!res.success) {
                        return void this.$toast(res.message)
                    }
                    this.pointInfo = res.result
                    this.openPoint = res.result && res.result.status == 'ON' ? true : false
                })
                .catch((err) => {
                })
        },

        // 切换自提点状态
        changePointStatus(status) {
            if (this.pointInfo && this.pointInfo.auditStatus == 'BAN') {
                this.$dialog.confirm({
                    title: '提示',
                    message: '当前您的自提点已被禁用，请联系商家~',
                    showCancelButton: false
                })
                return
            }

            const that = this

            // 拥有自提点时，并且处于提交关闭申请状态
            if (this.pointInfo && this.pointInfo.auditStatus == 'CLOSE_APPLY') {
                this.$toast('已提交关闭申请，请耐心等候')
                return
            }

            // 拥有自提点时，并且自提点处于关闭状态
            if (this.pointInfo && !this.openPoint && this.pointInfo.auditStatus == 'PASS') {
                this.changeStatus(true)
                return
            }

            // 拥有自提点时，并且自提点处于激活状态
            if (this.pointInfo && this.pointInfo.auditStatus == 'ACTIVATION_APPLY') {
                this.$toast('已提交激活申请，请耐心等候')
                return
            }

            const title = status ? '开启自提点' : '关闭自提点'
            const message = status ? '如需开启，须先填写您的自提点信息' : '自提点关闭期间用户下单不可选择'
            this.$dialog
                .confirm({
                    title: title,
                    message: message
                })
                .then(() => {
                    if ((status && !this.pointInfo) || this.pointInfo.auditStatus == 'REJECT_APPLY') {
                        this.$router.push({ name: 'pointActive', query: { first: 1 } })
                        return
                    }
                    if (!status) {
                        that.changeStatus(status)
                    }
                })
                .catch(() => {})
        },

        // 更换状态
        changeStatus(status) {
            disSMPointUpdateStatus({
                status: status ? 'ON' : 'OFF'
            })
                .then((res) => {
                    if (!res.success) {
                        return void this.$toast(res.msg)
                    }
                    this.$toast({
                        message: status ? '操作成功' : '提交申请成功',
                        onClose: () => {
                            this.getInfo()
                        }
                    })
                })
                .catch((err) => {
                })
        }
    }
}
</script>

<style>
.van-cell {
    padding: 10px;
}
</style>
